<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import SockJS from 'sockjs-client'
import { Client } from '@stomp/stompjs'

const title = "后端->前端 无参"

// 定义一个响应式的数组，用于存储消息
const messages = ref([])
// 连接状态
const connected = ref(false)

let stompClient = null

// 在组件挂载时，建立WebSocket连接并设置消息订阅
onMounted(() => {
  const socket = new SockJS('http://localhost:8080/ws')
  stompClient = new Client({
    webSocketFactory: () => socket, // 使用传入的 socket 创建 WebSocket 连接
    debug: (str) => console.debug(str), // 开启调试模式，将调试信息输出到控制台
    reconnectDelay: 5000, // 设置断线重连时间为 5000 毫秒
    heartbeatIncoming: 4000,
    heartbeatOutgoing: 4000,
    connectionTimeout: 3000,    // 添加连接超时设置
  })

  // 当连接建立时，订阅指定的消息主题
  stompClient.onConnect = () => {
    console.log("连接成功");
    connected.value = true;
    const sub = stompClient.subscribe('/topic/time-alerts', (message) => {
      // 解析接收到的消息，并将其添加到消息列表的开头，同时保持列表中只有最新的6条消息
      const newMsg = JSON.parse(message.body)
      messages.value = [newMsg, ...messages.value.slice(0, 5)] // 保留最新6条
    })
    console.log("订阅对象：", sub);
  }
  stompClient.onDisconnect = () => {
    connected.value = false;
    console.log("断开连接");
  }
  stompClient.onWebSocketClose = () => {
    connected.value = false;
    console.log("WebSocket 连接已中断..");
    // 触发主动重连
    setTimeout(() => {
      console.log("尝试重新连接...");
      stompClient.activate();
      console.log("重新连接结束...");
    }, 5000);
  }
  stompClient.onStompError = (frame) => {
    connected.value = false;
    console.error('连接错误');
  }
  // 激活STOMP客户端，建立连接
  stompClient.activate()
})

// 在组件卸载时，断开WebSocket连接
onUnmounted(() => {
  if (stompClient) {
    stompClient.deactivate()
    connected.value = false;
  }
})

</script>

<template>
  <h2>{{title}}</h2>
  <div class="notifications">
    <h3>时间提醒 ({{ messages.length }}) [连接状态 {{ connected ? '已连接' : '未连接' }}]</h3>
    <div v-if="!connected">
      <p>正在等待后端服务连接...</p>
    </div>
    <template v-else>
      <div v-for="msg in messages" :key="msg.id" class="alert-item">
        事件 #{{ msg.id }} - {{ msg.time }}
      </div>
    </template>
  </div>
  <hr/>
</template>

<style scoped>
.notifications {
  padding: 20px;
  border: 1px solid #eee;
  max-width: 400px;
  margin: 20px auto;
}

.alert-item {
  padding: 8px;
  margin: 5px 0;
  background: #f8f8f8;
  border-radius: 4px;
}
</style>
